<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS_练习</title>
	<link rel="stylesheet" href="style.css">
	<style>
		#div1{border:1px solid black; width: 200px; height: 200px;}
		#div1 div:nth-child(1){width: 100px;height: 100px;background-color: red;}
		#div1 div:nth-child(2){width: 100px;height: 100px;background-color: green;}
		#div1 div:nth-child(3){width: 100px;height: 100px;background-color: blue;}
		#div1 div:nth-child(4){width: 100px;height: 100px;background-color: yellow;}
		/**通过默认定位或相对定位实现的田字格*/
		/*#div1 div:nth-child(2),#div1 div:nth-child(4){margin:-100px 0 0 100px ;}*/
		/**通过绝对定位*/
		#div1 div:nth-child(1),#div1 div:nth-child(3){position: absolute;
			margin:0 0 0 100px;
		}


	</style>
</head>
<body>
	<!--div#div1>div*4-->
	<div id="div1">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>